$.get('http://127.0.0.1:5000/bar1').then(res => {
    const myChart = echarts.init(document.getElementById('bar1'))
    const option = {
        title: {
            text: '深圳各区的在售和售罄的平均单价',
            left: 'center'
        },
        legend: {
            left: 'left'
        },
        tooltip: {},
        dataset: {
            source: res.data
        },
        xAxis: {type: 'category'},
        yAxis: {},
        series: [{type: 'bar'}, {type: 'bar'}]
    }
    myChart.setOption(option)
})

$.get('http://127.0.0.1:5000/bar2').then(res => {
    const myChart = echarts.init(document.getElementById('bar2'))
    const option = {
        title: {
            text: '深圳各户型的房源数量',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: res.label,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '户型',
                type: 'bar',
                barWidth: '60%',
                data: res.data
            }
        ]
    }
    myChart.setOption(option)
})

$.get('static/data/geo.json').then(geo => {
    $.get('http://127.0.0.1:5000/geo').then(res => {
        echarts.registerMap('SZ', geo)
        const myChart = echarts.init(document.getElementById('geo'))
        const option = {
            title: {
                text: '深圳各区房源数量',
                textStyle: {
                    color: '#000000'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            visualMap: {
                min: 0,
                max: 300,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            },
            series: [
                {
                    name: '房产数量',
                    type: 'map',
                    map: 'SZ',
                    data: res.data,
                }
            ]
        }
        myChart.setOption(option)
    })
})


$.get('http://127.0.0.1:5000/pie').then(res => {
    const myChart = echarts.init(document.getElementById('pie'))
    const option = {
        title: {
            text: '深圳各房屋类型占比',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '房屋类型',
                type: 'pie',
                radius: '50%',
                data: res.data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option)
})

$.get('http://127.0.0.1:5000/word_cloud').then(res => {
    const myChart = echarts.init(document.getElementById('word_cloud'))
    const option = {
        title: {
            text: '房源优势标签词云图'
        },
        tooltip: {},
        series: [{
            type: 'wordCloud',
            // shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
            shape: 'circle',
            // maskImage这个是可以自定义背景图片的，词云会按照图片的形状排布，所以有形状限制的时候，最好用背景图来实现，而且，这个背景图一定要放base64的，不然词云画不出来
            // maskImage: '',
            // 下面就是位置的配置
            left: 'center',
            top: 'center',
            width: '70%',
            height: '80%',
            right: null,
            bottom: null,
            // 词的大小，最小12px，最大60px，可以在这个范围调整词的大小
            sizeRange: [12, 60],
            // 每个词旋转的角度范围
            rotationRange: [-90, 90],
            rotationStep: 45,
            // 词间距，数值越小，间距越小，这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字
            gridSize: 8,
            // 允许词太大的时候，超出画布的范围
            drawOutOfBound: false,
            // 布局的时候是否有动画
            layoutAnimation: true,
            // 这是全局的文字样式，相对应的还可以对每个词设置字体样式
            textStyle: {
                fontFamily: 'sans-serif',
                fontWeight: 'bold',
                // 颜色可以用一个函数来返回字符串
                color: function () {
                    // Random color
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                focus: 'self',
                textStyle: {
                    textShadowBlur: 10,
                    textShadowColor: '#333'
                }
            },

            // 数据必须是一个数组，数组是对象，对象必须有name和value属性
            data: res.data
        }]
    }
    myChart.setOption(option)
})

$.get('http://127.0.0.1:5000/boxplot').then(res => {
        const myChart = echarts.init(document.getElementById('boxplot'))
        const option = {
            title: [
                {
                    text: '深圳各区单价箱线图',
                    left: 'center'
                }
            ],
            dataset: [
                {
                    // prettier-ignore
                    source: res.data
                },
                {
                    transform: {
                        type: 'boxplot',
                        config: {
                            itemNameFormatter: function (params) {
                                return res.label[params.value];
                            }
                        }
                    }
                },
                {
                    fromDatasetIndex: 1,
                    fromTransformResult: 1
                }
            ],
            tooltip: {
                formatter: function (param) {
                    //console.log(param);
                    return [
                        //'Product: ' + param.name + ' ',
                        'Max: ' + param.data[5],
                        'Q3: ' + param.data[4],
                        'Median: ' + param.data[3],
                        'Q1: ' + param.data[2],
                        'Min: ' + param.data[1]
                    ].join('<br/>');
                }
            },
            grid: {
                left: '10%',
                right: '10%',
                bottom: '15%'
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                nameGap: 30,
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                splitArea: {
                    show: true
                }
            },
            series: [
                {
                    name: 'boxplot',
                    type: 'boxplot',
                    datasetIndex: 1
                }
            ]
        }
        myChart.setOption(option)
    }
)